<template>
<!-- 这是递归组件 -->
   <a-submenu>
       <!-- 递归的每一层的title -->
       <div slot="title">{{list.title}}</div>
       <template v-for="(item,index) in list.children">
           <!-- 判断是否还有children属性没有就代表没有下一级了结束递归 -->
           <a-menu-item v-if="!item.children" :key="`a-menu-item_${index}_${i}`">{{item.title}}</a-menu-item>
           <!-- 自己调用自己 -->
           <recursion-menu v-else :key="`recursion-menu_${index}_${i}`" :list="item"></recursion-menu>
       </template>
   </a-submenu>
</template>

<script>
import AMenuItem from './a-menu-item.vue';
import ASubmenu from './a-submenu.vue';
export default {
    name: 'recursion-menu',
    components: { AMenuItem, ASubmenu },
    data() {
        return {
            
        };
    },
    props: {
        list:{
            type:Object,
            default:()=>([])
        },
        /**
         * @description 这个是用于设置每一层唯一的key的
         */
        i:{
            type:Number,
            default:0
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>